<template>
  <div class="yty-history">
    <h3 class="h3">石化企业信息维护</h3>
    <a-form-model :model="form" :colon="false" :labelCol="{span:6}" :wrapper-col="{span:17}" style="margin:10px 0">
      <a-row style="display: flex;align-items: center;">
        <a-col :span="5">
          <a-form-model-item label="企业名称" class="from-item__class">
            <a-input placeholder />
          </a-form-model-item>
        </a-col>
        
        <a-col :span="3" style="display: flex;justify-content: space-between;">
          <a-button style="letter-spacing: 8px;" @click="onSubmit" class="sousuobtn">搜索</a-button>
        </a-col>
        <a-col :span="4" :offset="14">
          <a-button class="exportbtn">
            <a-icon type="cloud-download" />导出数据
          </a-button>
        </a-col>
      </a-row>
    </a-form-model>
    <div class="tableclass">
      <a-table
      :data-source="data"
        :pagination="false"
        :row-selection="{onChange:onChange,onSelect:onSelect}"
      >
       <a-table-column key="detectionpoint" title="序号" data-index="detectionpoint" align="center" />
       <a-table-column key="detectiontime" title="企业名称" data-index="detectiontime" align="left" />
       <a-table-column key="time" title="工商登记号" data-index="time" align="left" />
       <a-table-column key="shulaing" title="地址" data-index="shulaing" align="left" width="24%" ellipsis="true"/>
       <a-table-column key="kucun" title="联系人" data-index="kucun" align="center" />
        <a-table-column key="action" title="操作" align="center" width="12%">
          <template slot-scope="record">
            <div class="handle">
              <span>企业详情</span>
                <a-button type="danger" style="background:#207064;border:0;color:black;width:70px;height:25px">维护</a-button>
            </div>
          </template>
        </a-table-column>
      </a-table>


      <div class="content-bottom clearfix">
        <div class="page-box">
          <div class="page-right">
            <a-button type="danger" style="background:#207064;border:0;color:black;width:100px">新增</a-button>
          </div>
          
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "yty-history",
  data() {
    return {
      form: {
        name: "",
        region: undefined,
        date1: undefined,
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      data: [
        {
          detectionpoint: "1",
          detectiontime: "XXXXXXXXXXX企业",
          time: "XXXXXXXXXXXXXXXXXXXXXXX",
          shulaing: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
          kucun: "张三",
        },
        {
          detectionpoint: "2",
          detectiontime: "XXXXXXXXXXX企业",
          time: "XXXXXXXXXXXXXXXXXXXXXXX",
          shulaing: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
          kucun: "张三",
        },
        {
          detectionpoint: "3",
          detectiontime: "XXXXXXXXXXX企业",
          time: "XXXXXXXXXXXXXXXXXXXXXXX",
          shulaing: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
          kucun: "张三",
        },
        {
          detectionpoint: "4",
          detectiontime: "XXXXXXXXXXX企业",
          time: "XXXXXXXXXXXXXXXXXXXXXXX",
          shulaing: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
          kucun: "张三",
        },
        {
          detectionpoint: "5",
          detectiontime: "XXXXXXXXXXX企业",
          time: "XXXXXXXXXXXXXXXXXXXXXXX",
          shulaing: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
          kucun: "张三",
        },
        {
          detectionpoint: "6",
          detectiontime: "XXXXXXXXXXX企业",
          time: "XXXXXXXXXXXXXXXXXXXXXXX",
          shulaing: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
          kucun: "张三",
        },
      ],
      current: 1,
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!", this.form);
    },
    // 表格方法
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    // 分页方法
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return <a>上一页</a>;
      } else if (type === "next") {
        return <a>下一页</a>;
      }
      return originalElement;
    },
    pagechangeFn(page, pageSize) {
      console.log(page, pageSize);
    }
  }
};
</script>
<style scoped>
.yty-history {
  width: 98%;
  height: 100%;
  padding: 2%;
  box-sizing: border-box;
}
.yty-history .from-item__class {
  display: flex;
}
.sousuobtn {
  font-size: 14px;
  background-color: #207064;
  border-color: #207064;
  font-weight: 600;
}
.exportbtn {
  background-color: transparent;
  border: 0;
  color: #207064;
  margin-left: 30px;
  
}
.content-bottom {
  margin-top: 24px;
  width: 100%;
}
.page-box {
  display: flex;
  justify-content: space-between;
  
}
.page-left{
   position: absolute;
  right: 3%;
  bottom: 45px;
}

.page-right{
  display: flex;
  position: absolute;
  left: 3%;
  bottom: 45px;
}
.totalclass {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  margin-right: 20px;
}
::v-deep.yty-history .ant-form-item {
  margin-bottom: 0;
}
::v-deep.ant-form-item-children {
  display: inline-block;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* 表格样式 */
.handle {
  width: 100%;
  color: #207064;
  display: flex;
  justify-content: space-between;
}
.handle > span:hover {
  cursor: pointer;
  color: aquamarine;
}
::v-deep.yty-history .ant-table table {
  border-radius: 0;
  border-left: 1px solid #207064;
  border-right: 1px solid #207064;
}
::v-deep.yty-history .ant-table-thead > tr > th {
  background-color: #207064;
  color: #9fb043;
  font-size: 16px;
  border-bottom: 0;
  border-radius: 0;
}
::v-deep.yty-history .ant-table-tbody > tr > td {
  color: rgba(255, 255, 255, 0.7);
  border-bottom: 1px solid #2c6a60;
}
::v-deep.yty-history .ant-table-tbody > tr:hover > td {
  background-color: transparent !important;
}
::v-deep.yty-history .ant-table-tbody > tr.ant-table-row-selected td {
  background-color: transparent;
}
::v-deep.yty-history .ant-checkbox-indeterminate .ant-checkbox-inner::after {
  background-color: #37ddc0;
}
::v-deep.yty-history .ant-checkbox-inner {
  border: 1px solid #37ddc0;
  background-color: #8cb3ae;
}
::v-deep.yty-history .ant-checkbox-checked .ant-checkbox-inner::after {
  border: 2px solid #37ddc0;
  border-top: 0;
  border-left: 0;
}
/* 分页 */
::v-deep.yty-history .ant-pagination-total-text {
  color: rgba(255, 255, 255, 0.7);
}
</style>